フロントエンドのビルドツールVite + Rainbowkitを使い、Walletの接続ボタンを作成した際のコードとはまりポイントを紹介します。

最近注目されているフロントエンドのビルドツールです。 ビルドツールとは、ソースコードから実行可能アプリケーションまでの作成を自動化するツールのことです。

Viteは、Evan Youによって開発されています。Evan YouはVue.jsの開発者でもありますが、ViteはVue専用、というわけではなくSvelte・Reactまで、さまざまな環境で利用可能な汎用的なツールです。

特徴はとにかく、早い！！！！ということ。Viteとはフランス語で「早い」を意味しているので名前からも早そうですね。

Rainbowkitとは、dapps (decentralized apps)向けに作られた reactのライブラリーです。 dappsでは、ウォレットに接続する機能が必要ですがそれを手軽に実装できちゃうのがこちらのrainbowkit。 デフォルトのウォレットボタンもありますが、デザイン変更も可能。どのウォレットを表示させるかも簡単に設定ができちゃいます。 さまざまなweb3関連のプロジェクトで使われているライブラリーです。

$ npm create vite@latest

上記の通常コマンドの他にも、色々なテンプレートがあるみたいです。

新規でnext.jsを使って開発する際は便利なコマンドがこちら。 npm init @rainbow-me/rainbowkit@latest

このコマンドで、rainbowkit + wagmi + next.jsを一気にインストールすることができます。 wagmiは、rainbowkit内で使用されているEthrerumの開発に必要なさまざまなhooksをまとめたライブラリーです。

既存のプロジェクトに入れたい場合や、Next.jsを使わない場合はこちら。 npm install @rainbow-me/rainbowkit wagmi ethers

Rainbowkitの使い方はとっても簡単。 最上位のコンポーネント（例: App.tsx）内で利用するチェーンの指定や、プロバイダーのAPI key を渡した後に、RainbowKitProvider と WagmiConfigに囲ってあげるだけで、App.tsx以下のコンポーネントでRainbowkitを利用することができます。

デフォルトは白基調のUIですが、ダークモードにも簡単に変更ができます。 ダークモードにしたい時は、RainbowkitProviderにthemeのpropを渡してあげるだけです。

Themeは全部で3つありますのでアプリに合わせて選んでみてください。

ここまではViteでもwebpackでも共通部分でしたが、最後にVite + Rainbowkitを使う上ではまりポイントがあるので紹介します。

Viteでは、Node polyfillが含まれていないため以下のような、polyfills.tsを作成してあげる必要があります。 (Polyfillとは最新のES仕様で書いたコードをどのブラウザーでも動作するようにするためのツール)

これを入れないとRainbowkitが正常に動きませんでした。 公式にも、Node Polyfillがないビルドツールを利用する際は、こちらのセットアップが必要と記載があります。